<template>
  <div class="hotel-page">
    <!-- 酒店头部 -->
    <section
      class="shop-header bg-white dark:bg-gray-800 shadow-sm relative mb-6"
    >
      <div class="container mx-auto px-4 py-6">
        <!-- 顶部导航 -->
        <div class="top-nav flex justify-between items-center mb-6">
          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
            酒店预订
          </h1>
          <div class="flex items-center gap-4">
            <el-button :icon="Star" @click="showFavorites = true">
              我的收藏
              <el-badge v-if="favoriteCount" :value="favoriteCount" />
            </el-button>
          </div>
        </div>

        <!-- 搜索栏 -->
        <div class="search-bar max-w-6xl mx-auto">
          <div class="flex flex-wrap gap-4">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="入住日期"
              end-placeholder="离店日期"
              class="!w-[260px]"
            />
            <div class="flex gap-2 flex-1">
              <el-input
                v-model="searchQuery"
                placeholder="搜索酒店名称、地址"
                class="search-input flex-1"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
      <div class="shop-content flex gap-8">
        <!-- 左侧筛选导航 -->
        <div class="category-sidebar w-60 flex-shrink-0">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
            <h2
              class="sidebar-title text-lg font-bold mb-4 text-gray-900 dark:text-white"
            >
              筛选条件
            </h2>

            <!-- 价格区间 -->
            <div class="filter-section mb-8">
              <h3
                class="text-base font-medium mb-4 text-gray-700 dark:text-gray-300"
              >
                价格区间
              </h3>
              <el-select
                v-model="filterConditions.priceRange"
                placeholder="选择价格区间"
                clearable
                class="w-full"
              >
                <el-option
                  v-for="range in priceRanges"
                  :key="range.value"
                  :label="range.label"
                  :value="range.value"
                />
              </el-select>
            </div>

            <!-- 酒店类型 -->
            <div class="filter-section mb-6">
              <h3
                class="text-base font-medium mb-3 text-gray-700 dark:text-gray-300"
              >
                酒店类型
              </h3>
              <el-radio-group
                v-model="filterConditions.hotelType"
                class="flex flex-col gap-1"
              >
                <el-radio
                  v-for="type in hotelTypes"
                  :key="type.value"
                  :label="type.value"
                  class="!mr-0 !-my-1"
                >
                  <span class="ml-1">{{ type.label }}</span>
                </el-radio>
              </el-radio-group>
            </div>

            <!-- 设施服务 -->
            <div class="filter-section">
              <h3
                class="text-base font-medium mb-4 text-gray-700 dark:text-gray-300"
              >
                设施服务
              </h3>
              <el-checkbox-group
                v-model="filterConditions.facilities"
                class="flex flex-col gap-2"
              >
                <el-checkbox
                  v-for="facility in facilityOptions"
                  :key="facility.value"
                  :label="facility.value"
                >
                  <div class="flex items-center">
                    <el-icon class="mr-2"
                      ><component :is="facility.icon"
                    /></el-icon>
                    {{ facility.label }}
                  </div>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>

        <!-- 右侧酒店列表区域 -->
        <div class="products-area flex-1">
          <!-- 筛选工具栏 -->
          <div
            class="filter-toolbar bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm mb-6"
          >
            <div class="flex flex-wrap gap-4">
              <!-- 排序选项 -->
              <div class="sort-options">
                <el-radio-group v-model="sortBy" @change="handleFilter">
                  <el-radio-button label="comprehensive"
                    >综合排序</el-radio-button
                  >
                  <el-radio-button label="price-asc"
                    >价格从低到高</el-radio-button
                  >
                  <el-radio-button label="price-desc"
                    >价格从高到低</el-radio-button
                  >
                  <el-radio-button label="rating">好评优先</el-radio-button>
                </el-radio-group>
              </div>

              <!-- 视图切换 -->
              <div class="view-mode ml-auto">
                <el-radio-group v-model="viewMode" size="small">
                  <el-radio-button label="grid">
                    <el-icon><Grid /></el-icon>
                  </el-radio-button>
                  <el-radio-button label="list">
                    <el-icon><List /></el-icon>
                  </el-radio-button>
                </el-radio-group>
              </div>
            </div>

            <div
              class="filter-summary mt-4 text-gray-500 dark:text-gray-400 text-sm"
            >
              找到
              <span
                class="text-primary-600 dark:text-primary-400 font-medium"
                >{{ total }}</span
              >
              家酒店
            </div>
          </div>

          <!-- 酒店列表 -->
          <div class="hotels-grid" v-loading="loading">
            <template v-if="viewMode === 'grid'">
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div
                  v-for="hotel in hotelsList"
                  :key="hotel.id"
                  class="hotel-card bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
                  @click="goToDetail(hotel.id)"
                >
                  <!-- 酒店图片 -->
                  <div class="relative">
                    <el-image
                      :src="hotel.image"
                      fit="cover"
                      class="w-full h-48 rounded-t-xl"
                    />
                    <div class="absolute top-4 right-4">
                      <el-button
                        circle
                        :type="hotel.isFavorite ? 'danger' : ''"
                        :icon="hotel.isFavorite ? 'Star' : 'StarFilled'"
                        @click.stop="toggleFavorite(hotel)"
                      />
                    </div>
                  </div>

                  <!-- 酒店信息 -->
                  <div class="p-4">
                    <h3
                      class="text-xl font-bold text-gray-900 dark:text-white mb-2 line-clamp-1"
                    >
                      {{ hotel.name }}
                    </h3>
                    <div class="flex items-center gap-2 mb-2">
                      <el-rate
                        v-model="hotel.rating"
                        disabled
                        text-color="#ff9900"
                      />
                      <span class="text-orange-500">{{ hotel.rating }}分</span>
                      <span class="text-gray-500"
                        >({{ hotel.reviewCount }}点评)</span
                      >
                    </div>
                    <p
                      class="text-gray-600 dark:text-gray-400 text-sm mb-3 line-clamp-1"
                    >
                      {{ hotel.address }}
                    </p>
                    <div class="flex flex-wrap gap-2 mb-4">
                      <el-tag
                        v-for="tag in hotel.tags"
                        :key="tag"
                        size="small"
                        :type="getTagType(tag)"
                        effect="light"
                      >
                        {{ tag }}
                      </el-tag>
                    </div>
                    <div class="flex items-center justify-between">
                      <div class="text-2xl font-bold text-primary-600">
                        ¥{{ hotel.price }}
                        <span class="text-sm text-gray-500">起</span>
                      </div>
                      <el-button
                        type="primary"
                        @click.stop="goToDetail(hotel.id)"
                      >
                        查看详情
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </template>

            <template v-else>
              <div class="space-y-6">
                <div
                  v-for="hotel in hotelsList"
                  :key="hotel.id"
                  class="hotel-card bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
                  @click="goToDetail(hotel.id)"
                >
                  <div class="flex">
                    <!-- 酒店图片 -->
                    <div class="w-80 h-60 relative">
                      <el-image
                        :src="hotel.image"
                        fit="cover"
                        class="w-full h-full rounded-l-xl"
                      />
                      <div class="absolute top-4 right-4">
                        <el-button
                          circle
                          :type="hotel.isFavorite ? 'danger' : ''"
                          :icon="hotel.isFavorite ? 'Star' : 'StarFilled'"
                          @click.stop="toggleFavorite(hotel)"
                        />
                      </div>
                    </div>

                    <!-- 酒店信息 -->
                    <div class="flex-1 p-6">
                      <div class="flex justify-between">
                        <div>
                          <h3
                            class="text-2xl font-bold text-gray-900 dark:text-white mb-3"
                          >
                            {{ hotel.name }}
                          </h3>
                          <div class="flex items-center gap-2 mb-3">
                            <el-rate
                              v-model="hotel.rating"
                              disabled
                              text-color="#ff9900"
                            />
                            <span class="text-orange-500"
                              >{{ hotel.rating }}分</span
                            >
                            <span class="text-gray-500"
                              >({{ hotel.reviewCount }}点评)</span
                            >
                          </div>
                          <p class="text-gray-600 dark:text-gray-400 mb-4">
                            {{ hotel.address }}
                          </p>
                          <div class="flex flex-wrap gap-2 mb-4">
                            <el-tag
                              v-for="tag in hotel.tags"
                              :key="tag"
                              :type="getTagType(tag)"
                              effect="light"
                            >
                              {{ tag }}
                            </el-tag>
                          </div>
                          <p
                            class="text-gray-600 dark:text-gray-400 text-sm line-clamp-2"
                          >
                            {{ hotel.description }}
                          </p>
                        </div>
                        <div class="text-right">
                          <div class="text-3xl font-bold text-primary-600 mb-4">
                            ¥{{ hotel.price }}
                            <span class="text-sm text-gray-500">起</span>
                          </div>
                          <el-button
                            type="primary"
                            size="large"
                            @click.stop="goToDetail(hotel.id)"
                          >
                            查看详情
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>

            <!-- 空状态 -->
            <el-empty
              v-if="!loading && !hotelsList.length"
              description="暂无相关酒店"
            >
              <el-button @click="resetFilters">清除筛选</el-button>
            </el-empty>

            <!-- 分页 -->
            <div
              v-if="total > 0"
              class="pagination-wrapper flex justify-center mt-8"
            >
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[12, 24, 36, 48]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 我的收藏抽屉 -->
    <el-drawer v-model="showFavorites" title="我的收藏" size="60%">
      <template #header>
        <div class="flex items-center justify-between w-full pr-4">
          <span class="text-lg font-medium">我的收藏</span>
          <div class="text-sm text-gray-500 dark:text-gray-400">
            共 {{ favoriteHotels.length }} 家酒店
          </div>
        </div>
      </template>

      <div class="p-4">
        <div class="favorites-list grid grid-cols-1 md:grid-cols-2 gap-6">
          <div
            v-for="hotel in favoriteHotels"
            :key="hotel.id"
            class="favorite-card bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-all duration-300"
          >
            <div class="relative">
              <el-image
                :src="hotel.image"
                fit="cover"
                class="w-full h-48 rounded-t-lg object-cover"
              />
              <div class="absolute top-2 right-2">
                <el-button
                  circle
                  type="danger"
                  :icon="Delete"
                  @click.stop="removeFavorite(hotel.id)"
                />
              </div>
            </div>
            <div class="p-4">
              <h4
                class="text-lg font-medium mb-2 text-gray-900 dark:text-white"
              >
                {{ hotel.name }}
              </h4>
              <div class="flex items-center gap-2 mb-2">
                <el-rate v-model="hotel.rating" disabled size="small" />
                <span class="text-orange-500 text-sm"
                  >{{ hotel.rating }}分</span
                >
                <span class="text-gray-500 dark:text-gray-400 text-sm"
                  >({{ hotel.reviewCount }}点评)</span
                >
              </div>
              <div class="flex flex-wrap gap-2 mb-3">
                <el-tag
                  v-for="tag in hotel.tags"
                  :key="tag"
                  size="small"
                  :type="getTagType(tag)"
                  effect="light"
                >
                  {{ tag }}
                </el-tag>
              </div>
              <div class="flex items-center justify-between">
                <div
                  class="text-xl font-bold text-primary-600 dark:text-primary-400"
                >
                  ¥{{ hotel.price }}
                  <span class="text-sm text-gray-500 dark:text-gray-400"
                    >起</span
                  >
                </div>
                <el-button type="primary" @click="goToDetail(hotel.id)">
                  查看详情
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <el-empty v-if="!favoriteHotels.length" description="暂无收藏的酒店">
          <el-button type="primary" @click="showFavorites = false"
            >去收藏</el-button
          >
        </el-empty>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import {
  Star,
  Search,
  Grid,
  List,
  Delete,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/stores/user";
import service from "@/api/axios";

const router = useRouter();
const userStore = useUserStore();

// 视图模式
const viewMode = ref("grid");

// 搜索相关
const searchQuery = ref("");
const dateRange = ref([]);
const loading = ref(false);
const total = ref(0);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(12);

// 排序方式
const sortBy = ref("comprehensive");

// 价格区间选项
const priceRanges = [
  { label: "全部", value: "" },
  { label: "¥0-200", value: "0-200" },
  { label: "¥200-400", value: "200-400" },
  { label: "¥400-600", value: "400-600" },
  { label: "¥600-1000", value: "600-1000" },
  { label: "¥1000以上", value: "1000+" },
];

// 筛选条件
const filterConditions = reactive({
  priceRange: "",
  hotelType: "",
  facilities: [],
});

// 酒店类型选项
const hotelTypes = [
  { label: "经济型", value: "economic" },
  { label: "舒适型", value: "comfort" },
  { label: "高档型", value: "luxury" },
  { label: "豪华型", value: "premium" },
];

// 设施服务选项
const facilityOptions = [
  { label: "免费WiFi", value: "wifi", icon: "Connection" },
  { label: "停车场", value: "parking", icon: "Van" },
  { label: "健身房", value: "gym", icon: "Trophy" },
  { label: "游泳池", value: "pool", icon: "Sunny" },
  { label: "餐厅", value: "restaurant", icon: "Food" },
  { label: "会议室", value: "meeting_room", icon: "OfficeBuilding" },
];

// 收藏相关
const showFavorites = ref(false);
const favoriteCount = ref(0);
const favoriteHotels = ref([]);

// 酒店列表数据
const hotelsList = ref([]);

// 测试数据（当API请求失败时使用）
const testHotels = [
  {
    id: 1,
    name: "贵港大酒店",
    image:
      "https://img1.baidu.com/it/u=1048865249,1649413181&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500",
    rating: 4.5,
    reviewCount: 1234,
    address: "贵港市港北区市中心广场1号",
    price: 388,
    tags: ["四星级", "商务出行", "会议服务"],
    description: "位于市中心，交通便利，设施齐全",
    isFavorite: false,
  },
  {
    id: 2,
    name: "贵港豪华精选酒店",
    image:
      "https://img0.baidu.com/it/u=2492100254,3786221706&fm=253&fmt=auto&app=138&f=JPEG?w=809&h=500",
    rating: 4.8,
    reviewCount: 856,
    address: "贵港市港北区江北大道88号",
    price: 588,
    tags: ["五星级", "亲子游", "度假村"],
    description: "集度假、休闲、娱乐为一体的综合性酒店",
    isFavorite: false,
  },
];

// 测试收藏数据
const testFavorites = [
  {
    id: 1,
    name: "贵港大酒店",
    image:
      "https://img0.baidu.com/it/u=379837178,4175610883&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=279",
    rating: 4.5,
    price: 388,
    reviewCount: 1234,
    tags: ["四星级", "商务出行", "会议服务"],
  },
  {
    id: 2,
    name: "贵港豪华精选酒店",
    image:
      "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00731-2170.jpg",
    rating: 4.8,
    price: 588,
    reviewCount: 856,
    tags: ["五星级", "亲子游", "度假村"],
  },
];

// 获取酒店列表
const fetchHotels = async () => {
  loading.value = true;
  try {
    // 构建查询参数
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value,
      sortBy: sortBy.value,
      search: searchQuery.value,
      ...filterConditions,
    };
    
    // 添加日期范围
    if (dateRange.value && dateRange.value.length === 2) {
      params.checkInDate = dateRange.value[0];
      params.checkOutDate = dateRange.value[1];
    }

    const response = await service.get("/public/hotels", { params });
    
    if (response.data && response.data.data && Array.isArray(response.data.data)) {
      hotelsList.value = response.data.data.map(hotel => ({
        ...hotel,
        isFavorite: false,  // 默认未收藏
      }));
      total.value = response.data.total || response.data.data.length;
    } else {
      // 使用测试数据
      hotelsList.value = testHotels;
      total.value = testHotels.length;
    }
    
    // 如果用户已登录，检查哪些酒店已被收藏
    if (userStore.token) {
      await checkFavoriteStatus();
    }
  } catch (error) {
    console.error("获取酒店列表失败:", error);
    // 使用测试数据
    hotelsList.value = testHotels;
    total.value = testHotels.length;
  } finally {
    loading.value = false;
  }
};

// 检查酒店收藏状态
const checkFavoriteStatus = async () => {
  if (!userStore.token) return;
  
  try {
    const response = await service.get("/user/favorites/status", {
      params: {
        hotelIds: hotelsList.value.map(hotel => hotel.id).join(",")
      }
    });
    
    if (response && Array.isArray(response)) {
      // 更新收藏状态
      hotelsList.value.forEach(hotel => {
        hotel.isFavorite = response.includes(hotel.id);
      });
    }
  } catch (error) {
    console.error("获取收藏状态失败:", error);
  }
};

// 方法
const handleSearch = () => {
  currentPage.value = 1; // 重置页码
  fetchHotels();
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchHotels();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchHotels();
};

const resetFilters = () => {
  filterConditions.priceRange = "";
  filterConditions.hotelType = "";
  filterConditions.facilities = [];
  currentPage.value = 1;
  fetchHotels();
};

// 检查登录状态
const checkLogin = () => {
  if (!userStore.token) {
    ElMessageBox.confirm("需要登录才能继续操作,是否前往登录?", "提示", {
      confirmButtonText: "去登录",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        router.push({
          path: "/login",
          query: { redirect: router.currentRoute.value.fullPath },
        });
      })
      .catch(() => {});
    return false;
  }
  return true;
};

const goToDetail = (hotelId) => {
  router.push(`/hotel/${hotelId}`);
};

// 获取收藏列表
const fetchFavorites = async () => {
  if (!userStore.token) {
    favoriteHotels.value = [];
    favoriteCount.value = 0;
    return;
  }

  try {
    const response = await service.get("/user/favorites");
    
    if (response && Array.isArray(response)) {
      favoriteHotels.value = response;
      favoriteCount.value = response.length;
    } else {
      // 使用测试数据
      favoriteHotels.value = testFavorites;
      favoriteCount.value = testFavorites.length;
    }
  } catch (error) {
    console.error("获取收藏列表失败:", error);
    // 使用测试数据
    favoriteHotels.value = testFavorites;
    favoriteCount.value = testFavorites.length;
  }
};

// 添加/取消收藏
const toggleFavorite = async (hotel) => {
  if (!checkLogin()) return;

  try {
    if (hotel.isFavorite) {
      // 取消收藏
      await service.delete(`/user/favorites/${hotel.id}`);
      hotel.isFavorite = false;
      ElMessage.success("已取消收藏");
      
      // 更新收藏列表
      favoriteHotels.value = favoriteHotels.value.filter((h) => h.id !== hotel.id);
      favoriteCount.value = favoriteHotels.value.length;
    } else {
      // 添加收藏
      await service.post("/user/favorites", { hotelId: hotel.id });
      hotel.isFavorite = true;
      ElMessage.success("收藏成功");
      
      // 更新收藏列表
      await fetchFavorites();
    }
  } catch (error) {
    console.error("收藏操作失败:", error);
    ElMessage.error("操作失败，请重试");
  }
};

// 从收藏列表中移除酒店
const removeFavorite = async (hotelId) => {
  if (!checkLogin()) return;

  try {
    await ElMessageBox.confirm("确定要取消收藏该酒店吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    await service.delete(`/user/favorites/${hotelId}`);
    
    // 更新收藏列表
    favoriteHotels.value = favoriteHotels.value.filter((h) => h.id !== hotelId);
    favoriteCount.value = favoriteHotels.value.length;
    
    // 更新酒店列表中的收藏状态
    const hotel = hotelsList.value.find(h => h.id === hotelId);
    if (hotel) {
      hotel.isFavorite = false;
    }
    
    ElMessage.success("已取消收藏");
  } catch (error) {
    if (error !== "cancel") {
      console.error("取消收藏失败:", error);
      ElMessage.error("取消收藏失败");
    }
  }
};

const getTagType = (tag) => {
  const tagTypes = {
    五星级: "danger",
    四星级: "warning",
    三星级: "",
    商务出行: "info",
    亲子游: "success",
  };
  return tagTypes[tag] || "";
};

// 处理筛选
const handleFilter = async () => {
  currentPage.value = 1;
  await fetchHotels();
};

// 处理价格区间变化
const handlePriceRangeChange = (range) => {
  if (!range) {
    filterConditions.minPrice = null;
    filterConditions.maxPrice = null;
  } else if (range === "1000+") {
    filterConditions.minPrice = 1000;
    filterConditions.maxPrice = null;
  } else {
    const [min, max] = range.split("-").map(Number);
    filterConditions.minPrice = min;
    filterConditions.maxPrice = max;
  }
  handleFilter();
};

// 监听筛选条件变化
watch(
  [
    () => filterConditions.hotelType,
    () => filterConditions.facilities,
    () => filterConditions.priceRange,
    () => sortBy.value,
    () => dateRange.value,
  ],
  () => {
    handleFilter();
  },
  { deep: true },
);

// 生命周期钩子
onMounted(async () => {
  await fetchHotels();
  if (userStore.token) {
    await fetchFavorites();
  }
  
  // 监听登录状态变化
  watch(() => userStore.token, async (newVal) => {
    if (newVal) {
      await fetchFavorites();
      await checkFavoriteStatus();
    } else {
      favoriteHotels.value = [];
      favoriteCount.value = 0;
      // 重置收藏状态
      hotelsList.value.forEach(hotel => {
        hotel.isFavorite = false;
      });
    }
  });
});
</script>

<style lang="scss" scoped>
.hotel-page {
  min-height: 100vh;
  @apply bg-gray-50 dark:bg-gray-900;
}

.shop-header {
  .search-bar {
    .search-input {
      :deep(.el-input__wrapper) {
        height: 42px;
        border: 1px solid #dcdfe6;
        border-radius: 8px;
        transition: all 0.3s ease;
        box-shadow: none;
        min-width: 300px;

        &:hover {
          border-color: #409eff;
        }

        &.is-focus {
          border-color: #409eff;
          box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.2);
        }

        @apply dark:bg-gray-800 dark:border-gray-700;

        &:hover {
          @apply dark:border-gray-600;
        }

        &.is-focus {
          @apply dark:border-primary-500 dark:shadow-primary-500/20;
        }
      }

      :deep(.el-input__inner) {
        height: 42px;
        line-height: 42px;
        @apply dark:text-gray-300;

        &::placeholder {
          @apply dark:text-gray-500;
        }
      }

      :deep(.el-input__prefix) {
        color: #909399;
        font-size: 18px;
        transition: color 0.3s ease;
        @apply dark:text-gray-400;
      }

      &:hover {
        :deep(.el-input__prefix) {
          color: #409eff;
          @apply dark:text-gray-300;
        }
      }
    }

    :deep(.el-date-editor) {
      height: 42px;
      border-radius: 8px;
      @apply dark:bg-gray-800 dark:border-gray-700;

      .el-range-input {
        @apply dark:text-gray-300;
      }

      .el-range-separator {
        @apply dark:text-gray-500;
      }
    }

    :deep(.el-button) {
      height: 42px;
      padding: 11px 20px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }
  }
}

.category-sidebar {
  :deep(.el-menu) {
    @apply bg-transparent border-0;

    .el-menu-item {
      @apply mb-1 rounded-lg text-gray-700 dark:text-gray-300;

      &:hover,
      &.is-active {
        @apply bg-primary-50 dark:bg-primary-900/50;
      }
    }
  }
}

.filter-toolbar {
  @apply border border-gray-200 dark:border-gray-700
         shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] dark:shadow-[0_2px_12px_0_rgba(0,0,0,0.3)];

  &:hover {
    @apply shadow-[0_4px_20px_0_rgba(0,0,0,0.15)] dark:shadow-[0_4px_20px_0_rgba(0,0,0,0.4)];
  }
}

.hotel-tabs {
  :deep(.el-tabs__header) {
    @apply mb-6;
  }

  :deep(.el-tabs__nav-wrap::after) {
    @apply dark:bg-gray-700;
  }

  :deep(.el-tabs__item) {
    @apply text-gray-600 dark:text-gray-400;

    &.is-active {
      @apply text-primary-600 dark:text-primary-400;
    }

    &:hover {
      @apply text-primary-500 dark:text-primary-300;
    }
  }
}

.hotel-card {
  @apply transition-all duration-300;

  &:hover {
    @apply transform -translate-y-1 shadow-lg dark:shadow-gray-800/50;
  }

  :deep(.el-button) {
    @apply dark:border-gray-600 dark:text-gray-300;

    &.el-button--primary {
      @apply dark:bg-primary-600 dark:border-primary-600 dark:text-white;

      &:hover {
        @apply dark:bg-primary-700 dark:border-primary-700;
      }
    }
  }

  :deep(.el-tag) {
    @apply dark:bg-opacity-10;

    &.el-tag--light {
      @apply dark:border-opacity-10;
    }
  }
}

:deep(.el-drawer) {
  @apply dark:bg-gray-800;

  .el-drawer__header {
    @apply dark:text-white dark:border-gray-700;
  }
}

:deep(.el-checkbox) {
  --el-checkbox-checked-text-color: var(--el-color-primary);
  --el-checkbox-checked-bg-color: var(--el-color-primary);
  --el-checkbox-checked-input-border-color: var(--el-color-primary);

  @apply dark:text-gray-300;

  .el-checkbox__label {
    @apply dark:text-gray-300;
  }

  &.is-checked {
    .el-checkbox__label {
      @apply dark:text-primary-400;
    }
  }
}

:deep(.el-radio) {
  width: 100%;
  padding: 4px 8px;
  margin-right: 0;
  border-radius: 4px;
  transition: all 0.3s ease;
  height: 32px;
  line-height: 24px;

  .el-radio__input {
    margin-top: 1px;
  }

  &:hover {
    background-color: var(--el-fill-color-light);
    @apply dark:bg-gray-700;
  }

  &.is-checked {
    background-color: var(--el-color-primary-light-9);
    @apply dark:bg-primary-900/50;
  }

  .el-radio__label {
    color: var(--el-text-color-regular);
    @apply dark:text-gray-300;
    font-size: 14px;
    padding-left: 4px;
  }

  &.is-checked .el-radio__label {
    color: var(--el-color-primary);
    @apply dark:text-primary-400;
  }
}

:deep(.el-pagination) {
  @apply dark:bg-transparent;

  .el-pagination__total,
  .el-pagination__sizes .el-input__inner,
  .el-pagination__jump .el-input__inner {
    @apply dark:text-gray-400 dark:bg-gray-700 dark:border-gray-600;
  }

  button {
    @apply dark:text-gray-400 dark:bg-gray-700 dark:border-gray-600;

    &:disabled {
      @apply dark:text-gray-600 dark:bg-gray-800;
    }
  }

  .el-pager li {
    @apply dark:text-gray-400 dark:bg-gray-700 dark:border-gray-600;

    &.active {
      @apply dark:text-primary-400 dark:bg-primary-900;
    }

    &:hover {
      @apply dark:text-primary-300;
    }
  }
}

.favorites-list {
  .favorite-card {
    @apply overflow-hidden;

    .el-image {
      @apply transition-transform duration-300;
    }

    &:hover {
      .el-image {
        @apply transform scale-105;
      }
    }
  }
}
</style>
